<template>
  <div class="signDetail">
    <h1 class="back-title"><i @click="back" class="iconfont icon-fanhui"></i>{{form.id == ''?'新增':'编辑'}}邮件模板</h1>
    <el-form ref="form" :model="form" label-width="90px"  :rules="rules" style="width: 99%">
      <el-form-item label="模板名称" prop="htmlName">
        <el-input v-model="form.htmlName" placeholder="请输入模板名称"></el-input>
      </el-form-item>
      <el-form-item label="模板内容" prop="htmlContent" class="ueditor">
        <SimpleUE :config="config"
                  ref="childEditor" :catchData="getContent"
                  @ready="ready"></SimpleUE>
      </el-form-item>
    </el-form>
    <footer style="margin-top: 20px;margin-left: 90px" class="common-btn">
      <el-button type="primary" id="submitEmail" size="small" @click="saveInfo" style="margin-left: 0"
      :loading="loading">{{loading?'保存中':'立即保存'}}
      </el-button>
      <el-button @click="back" size="small">取 消</el-button>
    </footer>
  </div>
</template>

<script>
    import {update, save} from "@/api/mail/admin/mail-sign";
    import SimpleUE from '@/components/ueditor/simpleUE'

    export default {
        name: "addMail",
        components: {SimpleUE},
        data() {
            return {
                form: {
                    id: '',
                    htmlType: 2,
                    htmlName: '',
                    htmlContent: '',
                    isDefault: false
                },
                rules: {
                    htmlContent: [
                        {required: true, message: '请设置模板内容', trigger: 'blur'},
                    ],
                    htmlName: [
                        {required: true, message: '请输入签名名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                },
                config:{
                    initialFrameHeight: 500,
                },
                loading:false
            }
        },
        methods: {
            ready(){
                this.getData();
            },
            back() {
                this.$store.commit('SET_CURRENTSETFRAG', 'fifth')
                this.$router.go(-1);
            },
            getData() {
                if (this.$route.path.indexOf('/add')==-1) {//编辑
                    const row = JSON.parse(this.$route.query.row);
                    this.form = Object.assign({}, row);
                    this.form.htmlType = 2;
                    this.form.htmlContent = encodeURIComponent(row.htmlContent);
                    //待处理
                    this.$nextTick(() => {
                        this.$refs.childEditor.insertEditor(row.htmlContent);
                    })
                }
            },
            saveInfo() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading=true;
                        if (this.form.id) {//编辑
                            update(this.form).then(res => {
                                this.dealEnd(res)
                            }).catch(err => {
                                this.loading=false;
                            });
                        } else {//保存
                            save(this.form).then(res => {
                                this.dealEnd(res)
                            }).catch(err => {
                                this.loading=false;
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            dealEnd(res) {
                this.loading=false;
                this.$message({
                    type: 'success',
                    message: res.data.msg
                });
                if (res.data.success) {
                    this.back();
                }
            },
            getContent(val) {
                this.form.htmlContent = encodeURIComponent(val);
            }
        }
    }
</script>

<style lang="scss" scoped>
  .signDetail {
    margin: 10px 0 150px 10px;
    height: 100%;
    overflow-y: auto;

    .edit {
      height: 400px;
      background-color: #F3F3F3;
    }

    .title {
      color: #435B77;
      font-weight: 600;
      padding-bottom: 10px;

      i.iconfont.icon-fanhui {
        font-size: 22px;
        color: #2A97F9;
        margin-right: 3px;
        cursor: pointer;
      }
    }
  }

</style>
